<template>
  <div class="chart-box" v-loading="loading">
    <div class="date-input flex">
      <el-date-picker v-model="timer" :clearable="false" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至"
        start-placeholder="开始日期" end-placeholder="结束日期" @change="timeChange">
      </el-date-picker>
      <div class="huizong flex">
        <el-statistic class="total-item" group-separator="," :value-style="{color:'#188df0'}" :precision="0" :value="Number(sumData.backlistCount)" :title="'回收列表'"></el-statistic>
        <el-statistic class="total-item" group-separator="," :value-style="{color:'#cc900f'}" :precision="0" :value="Number(sumData.quotationCount)" :title="'回收报价'"></el-statistic>
        <el-statistic class="total-item" group-separator="," :value-style="{color:'#2ddde8'}" :precision="0" :value="Number(sumData.krecycleCount)" :title="'生成订单'"></el-statistic>
        <el-statistic class="total-item" group-separator="," :value-style="{color:'#3eb54f'}" :precision="0" :value="Number(sumData.krecycleSuccessCount)" :title="'交易成功'"></el-statistic>
        <el-statistic class="total-item" group-separator="," :value-style="{color:'#dd28e8'}" :precision="2" :value="Number(sumData.krecycleSuccessPrice)" :title="'成交金额'"></el-statistic>
      </div>
    </div>
    <div id="echarts-by-day"></div>
    <div id="echarts-by-day-price"></div>
  </div>
</template>

<script>
import chartsApi from "@/api/chartsDatas/index"
import * as echarts from 'echarts';
import { formatDate } from "@/utils/index";
export default {
  name: "statistics",
  components: {

  },
  data() {
    return {
      loading:false,
      dataByDay: [],
      option: {},
      myChart: null,
      myChartPrice:null,
      timer: [],
      params: {
        startTime: '',
        endTime: ''
      },
      backlistCountArr:[],
      quotationCountArr:[],
      krecycleCountArr:[],
      krecycleSuccessCountArr:[],
      krecycleSuccessPriceArr:[],
      xData:[],
    sumData:{},
    totalStyle:{
      color:""
    }
    };
  },
  created() {

  },
  mounted() {
    // 取最近一月的时间范围
    let now = new Date()
    let end = formatDate(now)
    let start = formatDate(now.getTime() - 30*24*3600*1000) 
    start = start.slice(0,10)
    end = end.slice(0,10)
    this.timer = [start,end]
    this.startTime = start
    this.endTime = end
    this.getsumData()
    this.$nextTick(() => {
      var chartDom = document.getElementById('echarts-by-day');
      this.myChart = echarts.init(chartDom);
      var priceChartDom =  document.getElementById('echarts-by-day-price');
      this.myChartPrice =  echarts.init(priceChartDom);
      this.getData()
      
    })
  },
  methods: {
    getsumData(){
      this.loading = true
      let params = {
        statisticsDateStart:this.startTime,
        statisticsDateEnd:this.endTime,
      }
      chartsApi.sumList(params).then(res=>{
        if(res.code==200&&res.data){
         this.sumData = res.data
        }
      
        this.loading = false
      })
    },
    timeChange(e) {
      if (e && e.length) {
        this.startTime = e[0]
        this.endTime = e[1]
      } else {
        this.startTime = ''
        this.endTime = ''
      }
      this.getsumData()
      this.getData()
    },
    getData() {
      this.loading = true
      let params = {
        statisticsDateStart:this.startTime,
        statisticsDateEnd:this.endTime,
      }
      chartsApi.getList(params).then(res=>{
        this.xData=[]
        this.backlistCountArr = []
        this.quotationCountArr = []
        this.krecycleCountArr = []
        this.krecycleSuccessCountArr = []
        this.krecycleSuccessPriceArr = []
        if(res.code==200&&res.rows){
          res.rows.forEach(r=>{
            this.xData.push(r.statisticsDate)
            this.backlistCountArr.push(r.backlistCount||0)
            this.quotationCountArr.push(r.quotationCount||0)
            this.krecycleCountArr.push(r.krecycleCount||0)
            this.krecycleSuccessCountArr.push(r.krecycleSuccessCount||0)
            this.krecycleSuccessPriceArr.push(r.krecycleSuccessPrice||0)
          })
        }
        this.initCharts()
        this.initCharts2()
        this.loading = false
      })
    },
    initCharts() {
      const labelOption = {
        show: false,
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        // color:'#ffffff',
        rich: {
          name: {
            color: '#ffffff'
          }
        }
      };
      let option = {
        title:{
          show:true,
          text:'回收订单统计',
          
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // color:['#e5d62b','#e8972d','#2ddde8','#3eb54f'],
        color: [new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 1, color: '#188df0' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f5d183' },
          { offset: 1, color: '#cc900f' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#aff5f9' },
          { offset: 1, color: '#2ddde8' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#9bf8a8' },
          { offset: 1, color: '#3eb54f' }
        ]), new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f391f9' },
          { offset: 1, color: '#dd28e8' }
        ])],
        legend: {
          data: ['回收列表', '回收报价', '生成订单', '交易成功','交易金额']
        },
        grid:{
          left:"100",
          right:'60'

        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter',
            endValue: 10,
            maxValueSpan:15
          },
        ],
        xAxis: [
          {
            name: '日期',
            type: 'category',
            axisTick: { show: false },
            data: this.xData
          }
        ],
        yAxis: [
          {
            name: '数量',
            type: 'value'
          }
        ],
        series: [
          {
            name: '回收列表',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },

            data: this.backlistCountArr
          },
          {
            name: '回收报价',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.quotationCountArr
          },
          {
            name: '生成订单',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.krecycleCountArr
          },
          {
            name: '交易成功',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.krecycleSuccessCountArr
          }
        ]
      };
      option && this.myChart.setOption(option);
    },
    initCharts2() {
      const labelOption = {
        show: false,
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        // color:'#ffffff',
        rich: {
          name: {
            color: '#ffffff'
          }
        }
      };
      let option = {
        title:{
          show:true,
          text:'成交金额统计',

        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // color:['#e5d62b','#e8972d','#2ddde8','#3eb54f'],
        color: [ new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#f391f9' },
          { offset: 1, color: '#dd28e8' }
        ])],
        legend: {
          data: ['成交金额']
        },
        grid:{
          left:"100",
          right:'60'
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        dataZoom: [
          {
            id: 'dataZoomX',
            type: 'slider',
            xAxisIndex: [0],
            filterMode: 'filter',
            endValue: 30,
            maxValueSpan:30
          },
        ],
        xAxis: [
          {
            name: '日期',
            type: 'category',
            axisTick: { show: false },
            data: this.xData
          }
        ],
        yAxis: [
          {
            name: '金额(元)',
            type: 'value'
          }
        ],
        series: [
          {
            name: '成交金额',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: this.krecycleSuccessPriceArr
          },
        ]
      };
      option && this.myChartPrice.setOption(option);
    }

  }
};
</script>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
  .huizong{
    // width: 100px;
    margin-left: 20px;
    .total-item{
      margin-right: 20px;
    }
  }
}

#echarts-by-day {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}
#echarts-by-day-price{
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
</style>

